<script setup></script>

<template>
  <!-- 底部波浪效果 -->
  <footer>
    <div class="wave-container">
      <div class="wave wave1"></div>
      <div class="wave wave2"></div>
    </div>
    <div class="footer-content">
      在线歌曲系统 ©2025 Created by 邓宣发
      <div>
        <!--        <span>蜀ICP备16029882号-1</span>
        <span>蜀ICP备16029882号-1</span>-->
      </div>
    </div>
  </footer>
</template>

<style scoped lang="scss">
/*底部波浪效果*/
footer {
  position: relative;
  height: 15vh; /* 波浪动画高度 */
  overflow: hidden;
  background: linear-gradient(to bottom, transparent, #0083ff);
  color: #f5f5f5;
  text-align: center;
}

.wave-container {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  overflow: hidden;
  line-height: 0;
}

.wave {
  position: absolute;
  top: 2rem;
  width: 200%;
  height: 100%;
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
  transform: translate3d(0, 0, 0);
}

.wave1 {
  background-image: url('@/assets/bannerWave1.png'); /* 你需要替换成实际的波浪图像 */
  animation: animateWave 20s linear infinite;
  z-index: 1000;
  opacity: 0.6;
}

.wave2 {
  background-image: url('@/assets/bannerWave2.png'); /* 你需要替换成实际的波浪图像 */
  animation: animateWave 35s linear infinite;
  z-index: 999;
}

@keyframes animateWave {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.footer-content {
  bottom: 0;
  position: relative;
  z-index: 1001;
  /* 其他样式 */
}
</style>
